<html>
<head>
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
	<script type="text/javascript" src="js/grid.locale-en.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
	
	<link rel="stylesheet" type="text/css" media="screen" href="css/custom-theme/jquery-ui-1.8.5.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
	
	<style type="text/css">
		/*demo page css*/
		* { font: 11px Verdana, "Trebuchet MS", sans-serif; }
	</style>
	
<title>RESTful</title>

<script type="text/javascript">

$(document).ready(function() {
$.jgrid.no_legacy_api = true;

	jQuery("#list2").jqGrid({ 
		// url: 'rest.php',
		url: 'http://localhost:8080/Xulapa-war/rest/xulapa/findmarcas?jsoncallback=?',
		datatype: "json", 
		colNames:['Id','Nome'], 
		colModel:[ 
			{name:'id',index:'id', width:55, jsonmap:'id', editable:true, editoptions:{readonly:true}, sorttype:'int'}, 
			{name:'nome',index:'nome', width:700, jsonmap:'nome', editable:true}
		], 
		jsonReader:{ repeatitems:false},
		rowNum:10, 
		// rowList:[10,20,30], 
		pager: '#pager2', 
		sortname: 'id', 
		viewrecords: true, 
		sortorder: "desc", 
		caption:"JSON Example",
		editurl: 'http://localhost:8080/Xulapa-war/rest/xulapa/marcas' }); 
		
	jQuery("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true}
	// , 
	// 		{beforeSubmit: function(postdata, formid) { 
	// 		    var httpbody = JSON.stringify(postdata);
	// 			alert(httpbody);
	// 			
	// 			return { success : false, message : "Successffully saved" };
	// 	 	}
			// }
	);

/*
jQuery.getJSON("http://localhost:8080/Xulapa-war/rest/xulapa/findmarcas",
function(data) {
  if (data.records == 0) {
    alert('zero');
  } else {
    var mygrid = jQuery("#list2")[0];
    mygrid.addJSONData(data);
    myjsongrid = null;
  	alert('if');

  }
});
*/

	$("#carregar").click(function() {
		$.getJSON('http://localhost:8080/Xulapa-war/rest/xulapa/findmarcas?jsoncallback=?', function(data) {
			alert(eval(data));
			var thegrid = jQuery("#list2")[0];
			thegrid.addJSONData(eval(data.responseText));
		});
	});
	
	$("#datepicker" ).datepicker();
	

} );

</script>


</head>
<body>
<p>Date: <input id="datepicker" type="text"></p>

<button id="carregar" type="button">carregar</button>

<table id="list2"></table>
<div id="pager2"></div> 
<hr/>

</body>
</html>